<!DOCTYPE html>
<html lang="en" ng-app="loklak">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="Content-Language" content="en, english"/>
  <meta name="author" content="@0rb1t3r"> <!-- CHANGE THIS -->
  <link rel="icon" type="image/png" href="../../artwork/favicon.png">
  <title>loklak.org - LQL Loklak Query Language</title> <!-- CHANGE THIS -->

  <link href="../../css/bootstrap.min.css" rel="stylesheet">
  <link href="../../css/dashboard.css" rel="stylesheet">
  <link href="../../css/loklak.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../js/html5shiv.min.js"></script>
      <script src="../../js/respond.min.js"></script>
      <![endif]-->

    <script src="../../js/angular.min.js"></script>
    <script src="../../js/angular-route.min.js"></script>
    <script src="../../js/loklak.js"></script>
    </head>

    <body>

      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://loklak.org">
            <img src="../../images/loklak_org.png"
                 height="24" style="float:left;">: Advanced Search
            </a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
            </ul>
          </div>
        </div>
      </nav>

      <div class="container-fluid">
      <div class="row">
        <div id="header" style="margin-top: 60px; margin-bottom: 60px;">
          <center><p><h3>Loklak Query Language</h3></p></center>
        </div>
        <div class="col-md-6 col-lg-6 col-sm-12">
          <form class="form-horizontal">
            <fieldset>

              <!-- Form Name -->


              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="query">Query Text</label>
                <div class="col-md-8">
                  <input id="query" id="query" name="query"
                         type="text" placeholder="Query Text"
                         class="form-control input-md" required="">

                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="timezoneoffset">Time Zone Offset</label>
                <div class="col-md-8">
                  <input id="timezoneoffset" id="timezoneoffset"
                         name="timezoneoffset" type="text"
                         placeholder="Enter the time zone offset in minutes"
                         class="form-control input-md">
                </div>
              </div>

              <!-- Multiple Radios -->
              <div class="form-group">
                <label class="col-md-4 control-label" for="api">Select API Call</label>
                <div class="col-md-8">
                  <div class="radio">
                    <label for="api-0">
                      <input type="radio" name="api" id="api-0" value="search.json" checked="checked">
                      Search
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-1">
                      <input type="radio" name="api" id="api-1" value="hello.json">
                      Hello
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-2">
                      <input type="radio" name="api" id="api-2" value="peers.json">
                      Peers
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-3">
                      <input type="radio" name="api" id="api-3" value="status.json">
                      Status
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-4">
                      <input type="radio" name="api" id="api-3" value="threaddump.txt">
                      Threaddump.txt
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-5">
                      <input type="radio" name="api" id="api-3" value="settings.json">
                      settings.json <code>Localhost Only</code>
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-6">
                      <input type="radio" name="api" id="api-3" value="xml2json.json">
                      XML2JSON.json
                    </label>
                  </div>
                  <div class="radio">
                    <label for="api-7">
                      <input type="radio" name="api" id="api-3" value="csv2json.json">
                      CSV2JSON.json
                    </label>
                  </div>
                </div>
              </div>

              <div id="inputFields">
                <label for="inputData" class="col-md-4 control-label">Input Data</label>
                <div class="col-md-8">
                  <textarea name="inputFieldArea" id="inputFieldArea" cols="30" rows="10"></textarea>
                </div>
              </div>

              <div id="searchOptions">
              <!-- Multiple Checkboxes -->
              <div class="form-group" id="aggregations">
                <label class="col-md-4 control-label" for="aggregations">Aggregations Fields</label>
                <div class="col-md-8">
                  <div class="checkbox">
                    <label for="aggregations-0">
                      <input type="checkbox" name="aggregations" id="aggregations-0" value="mentions">
                      mentions
                    </label>
                  </div>
                  <div class="checkbox">
                    <label for="aggregations-1">
                      <input type="checkbox" name="aggregations" id="aggregations-1" value="hashtags">
                      hashtags
                    </label>
                  </div>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="from">From User</label>
                <div class="col-md-8">
                  <input id="from" name="from" type="text"
                         placeholder="Enter username here"
                         class="form-control input-md">
                  <span class="help-block">this adds from:username and
                                           filters search for only the
                                           users</span>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="from">Since Date</label>
                <div class="col-md-8">
                  <input id="since" name="since" type="date"
                         placeholder="Enter Since date here"
                         class="form-control input-md">
                  <span class="help-block">this adds since:YYYY-MM-DD and filters search for only the users</span>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="from">Until Date</label>
                <div class="col-md-8">
                  <input id="until" name="until" type="date"
                         placeholder="Enter Until date here"
                         class="form-control input-md">
                  <span class="help-block">this adds until:YYYY-MM-DD and filters search for only the users</span>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="near">Near Location</label>
                <div class="col-md-8">
                  <input id="near" name="near" type="text"
                         placeholder="Enter location nearby to search for"
                         class="form-control input-md">
                  <span class="help-block">this adds near:location_name
                                           and returns tweets near the given
                                           location for the given query</span>
                </div>
              </div>

              <!-- Select Basic -->
              <div class="form-group">
                <label class="col-md-4 control-label" for="source">Source</label>
                <div class="col-md-8">
                  <select id="source" name="source" class="form-control">
                    <option value="cache">cache</option>
                    <option value="twitter">twitter</option>
                    <option value="backend">backend</option>
                    <option value="all">all</option>
                  </select>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="count">Count</label>
                <div class="col-md-8">
                  <input id="count" name="count" type="text"
                         placeholder="Integer value of number of results"
                         class="form-control input-md">
                  <span class="help-block">100 by default. You can have a custom number</span>
                </div>
              </div>

              <!-- Text input-->
              <div class="form-group">
                <label class="col-md-4 control-label" for="limit">Limit</label>
                <div class="col-md-8">
                  <input id="limit" name="limit" type="text"
                         placeholder="Integer value to limit number of results"
                         class="form-control input-md">
                  <span class="help-block">Use this field to limit number
                                           of results from aggregations</span>
                </div>
              </div>

              <!-- Multiple Radio (inline) -->
              <div class="form-group">
                <label class="col-md-4 control-label" for="minified">Minified Result</label>
                <div class="col-md-8">
                  <label class="radio-inline" for="minified-0">
                    <input type="radio" name="minified" id="minified-0" value="true">
                    True
                  </label>
                  <label class="radio-inline" for="minified-1">
                    <input type="radio" name="minified" id="minified-1" value="false">
                    False
                  </label>
                </div>
              </div>

              </div>

            </fieldset>
          </form>
        </div>
        <div class="col-md-6 col-lg-6 col-sm-12">
          <textarea name="queryGenerated" id="queryGenerated" cols="70" rows="10">
http://loklak.org/api/search.json
          </textarea>
          <!-- Buttons -->
          <div class="form-group" style="display: block; float: left;">
            <div class="col-md-4" style="margin-bottom: 10px;margin-top: 10px;">
              <button id="submitQuery" name="submitQuery" class="btn btn-success"
                onclick="queryLoklak()">Query Loklak</button>
            </div>
          </div>
          <div class="form-group" style="display: block; float: left;">
            <div class="col-md-4" style="margin-bottom: 10px;margin-top: 10px;">
              <button id="copyQueryString" name="copyQueryString" class="btn btn-success"
                onclick="copyQueryString()">copy</button>
            </div>
          </div>

          <!-- Button Ends -->
          <textarea name="queryResult" id="queryResult" cols="70" rows="25"></textarea>
          <!-- Buttons -->
          <div class="form-group" style="display: block; float: left;">
            <div class="col-md-4" style="margin-bottom: 10px;margin-top: 10px;">
              <button id="clearQueryResult" name="clearQueryresult" class="btn btn-success"
                onclick="clearQueryResult()">Clear</button>
            </div>
          </div>
          <div class="form-group" style="display: block; float: left;">
            <div class="col-md-4" style="margin-bottom: 10px;margin-top: 10px;">
              <button id="copyQueryResult" name="copyQueryresult" class="btn btn-success"
                onclick="copyQueryResult()">copy</button>
            </div>
          </div>

          <!-- Button Ends -->
        </div>
      </div>
      </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../js/ie10-viewport-bug-workaround.js"></script>
    <script src="lql.js"></script>
  </body>
  </html>
